<template>
  <el-dialog
    title="选择流程模板"
    :visible.sync="dialogVisible"
    width="50%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-input
      v-model="queryObj.SearchKey"
      placeholder="搜索"
      class="input-with-select"
      style="margin: 5px auto"
      @keyup.enter.native="searchClick"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="searchClick"
      />
    </el-input>
    <el-container>
      <el-main class="main-dialog">
        <el-row>
          <el-col :span="24">
            <el-collapse
              v-model="sheetTypeList"
              @change="handleChange"
            >
              <el-collapse-item v-for="item in billTypeList" :key="item.Id" :name="item.Id">
                <template slot="title"> <span class="a-title"><i :class="'iconfont a-icon ' +item.Icon" :style="'color:'+ item.Color" /> {{ item.BillName }}</span></template>
                <div
                  v-for="children in item.Children"
                  :key="children.Id"
                  class="a-list"
                  @click="chooseBill(children)"
                >
                  <a
                    href="JavaScript:void(0);"
                  ><i class="el-icon-caret-right" :style="'color:'+ item.Color" />{{ children.BillName }}
                  </a>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <div>
          <el-button
            size="medium"
            @click="onCancel"
          >返回</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-dialog>

</template>
<script>
import {
  loadBySelectBillType
} from '@/api/flow/index'
export default {

  data() {
    return {
      dialogVisible: false,
      sheetTypeList: ['2'], // 单据类型
      queryObj: {
        SearchKey: ''
      },
      billTypeList: [],
      showTypes: [],
      typeData: []
    }
  },
  created() {
    this.GetBillTypeList() // 获取费用类别下拉框列表数据
  },
  methods: {
    GetBillTypeList() {
      loadBySelectBillType(this.queryObj).then((res) => {
        this.typeData = res.Data
        if (this.showTypes.length > 0) {
          this.billTypeList = this.typeData.filter(item => this.showTypes.find(st => item.Id === st))
        } else {
          this.billTypeList = this.typeData
        }
      })
    },
    handleChange() {},
    showSelectBillTypeDialog(showTypes) {
      this.showTypes = showTypes || []
      if (!showTypes) {
        this.billTypeList = this.typeData
      }
      this.dialogVisible = true
    },
    onCancel() {
      this.dialogVisible = false
      this.$emit('billDialogColse')
    },
    searchClick() {
      this.GetBillTypeList()
    },
    chooseBill(obj) {
      this.$emit('chooseBill', obj)
    }
  }
}
</script>
